<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="linzhifeng@baidu.com">

    <script src="asset/js/esl/esl.js"></script>

    <!-- Le styles -->
    <link href="asset/css/bootstrap.css" rel="stylesheet">
    <link href="asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="asset/css/echartsHome.css" rel="stylesheet">
    <link href="asset/css/flexslider.css" rel="stylesheet"/>

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="asset/ico/favicon.png">
  </head>

  <body>

    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../index.html">ECharts</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
              <ul class="nav">
                <li><a href="../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active"><a href="example.html" class="active">Example</a></li>
                <li><a href="doc.html" >API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a id="last-release-link" href=""> </a></li>
                    <li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
                    
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row-fluid">
            <div class="span6">
                <h1>折线图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/line1.png">
                          <a href="example/line1.html"><img src="asset/img/example/line1.png" ></a>
                          <p>标准折线图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/line2.html"><img src="asset/img/example/cache.png"></a>
                          <p>堆积折线图，支持任意系列堆积</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/line5.html"><img src="asset/img/example/cache.png"></a>
                          <p>标准折线图，横纵坐标轴互换</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/line3.html"><img src="asset/img/example/cache.png"></a>
                          <p>标准面积图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/line4.html"><img src="asset/img/example/cache.png"></a>
                          <p>堆积面积图，支持任意系列堆积</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/line.html"><img src="asset/img/example/cache.png"></a>
                          <p>折线图：【个性化】填充、线条、拐点样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>柱状图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/bar1.png">
                          <a href="example/bar1.html"><img src="asset/img/example/bar1.png"></a>
                          <p>标准柱状图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar2.html"><img src="asset/img/example/cache.png"></a>
                          <p>堆积柱状图，支持任意系列堆积。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar3.html"><img src="asset/img/example/cache.png"></a>
                          <p>标准条状图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar4.html"><img src="asset/img/example/cache.png"></a>
                          <p>堆积条状图，支持任意系列堆积。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar5.html"><img src="asset/img/example/cache.png"></a>
                          <p>标准条状图，正负值混合。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar6.html"><img src="asset/img/example/cache.png"></a>
                          <p>阶梯瀑布图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar7.html"><img src="asset/img/example/cache.png"></a>
                          <p>瀑布图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar8.html"><img src="asset/img/example/cache.png"></a>
                          <p>交错正负轴标签。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar9.html"><img src="asset/img/example/cache.png"></a>
                          <p>多维条形图。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar10.html"><img src="asset/img/example/cache.png"></a>
                          <p>温度计式图表。</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/bar.html"><img src="asset/img/example/cache.png"></a>
                          <p>柱状图：【个性化】柱形宽度，填充、高亮样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
            </div>
            <hr>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <h1>散点图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/scatter1.png">
                          <a href="example/scatter1.html"><img src="asset/img/example/scatter1.png"></a>
                          <p>标准散点图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                           <a href="example/scatter2.html"><img src="asset/img/example/cache.png"></a>
                          <p>气泡图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                           <a href="example/scatter3.html"><img src="asset/img/example/cache.png"></a>
                          <p>大规模散点图（IE8-不支持）</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/scatter.html"><img src="asset/img/example/cache.png"></a>
                          <p>散点图：【个性化】图形样式，大小等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>K线图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                      <ul class="slides">
                        <li data-thumb="asset/img/example/k1.png">
                          <a href="example/k1.html"><img src="asset/img/example/k1.png"></a>
                          <p>标准K线图</p>
                        </li><!--/li-->
                        <li data-thumb="asset/img/example/cache.png">
                          <a href="example/k.html"><img src="asset/img/example/cache.png"></a>
                          <p>K线图：【个性化】柱形阴阳图形样式等~</p>
                        </li><!--/li-->
                      </ul>
                    </div>
                  </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <h1>饼图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie1.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准饼图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie2.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准环形图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie3.html"><img src="asset/img/example/cache.png"></a>
                              <p>嵌套饼图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie4.html"><img src="asset/img/example/cache.png"></a>
                              <p>南丁格尔玫瑰图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie5.html"><img src="asset/img/example/cache.png"></a>
                              <p>信息图样式</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie6.html"><img src="asset/img/example/cache.png"></a>
                              <p>信息图样式2</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/pie.html"><img src="asset/img/example/cache.png"></a>
                              <p>饼图：【个性化】填充、标签文本、视觉引导线样式等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>雷达图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/radar1.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准雷达图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/radar2.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准填充雷达图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/radar3.html"><img src="asset/img/example/cache.png"></a>
                              <p>多雷达图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/radar.html"><img src="asset/img/example/cache.png"></a>
                              <p>雷达图：【个性化】线条，拐点，填充样式</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <h1>和弦图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/chord1.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准和弦图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/chord2.html"><img src="asset/img/example/cache.png"></a>
                              <p>多维图例选择</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/chord.html"><img src="asset/img/example/cache.png"></a>
                              <p>和弦图：【个性化】填充、标签文本、线条样式等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>力导向布局图</h1>
                <section class="slider">
                    <div class="flexslider thumb3">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/force1.html"><img src="asset/img/example/cache.png"></a>
                              <p>简单关系网络。</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/force2.html"><img src="asset/img/example/cache.png"></a>
                              <p>树状关系网络。</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/webkit-dep.html"><img src="asset/img/example/cache.png"></a>
                              <p>Webkit内核依赖。</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <h1>地图</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map1.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准地图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map2.html"><img src="asset/img/example/cache.png"></a>
                              <p>地域选择器</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map4.html"><img src="asset/img/example/cache.png"></a>
                              <p>标准世界地图</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map5.html"><img src="asset/img/example/cache.png"></a>
                              <p>世界地图选择器</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map3.html"><img src="asset/img/example/cache.png"></a>
                              <p>全国34个省市自治区</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map6.html"><img src="asset/img/example/cache.png"></a>
                              <p>自定义扩展-香港</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map7.html"><img src="asset/img/example/cache.png"></a>
                              <p>自定义扩展-美国</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map8.html"><img src="asset/img/example/cache.png"></a>
                              <p>mapType支持子区域模式</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map9.html"><img src="asset/img/example/cache.png"></a>
                              <p>标注支持（markPoint）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map10.html"><img src="asset/img/example/cache.png"></a>
                              <p>标线支持（markLine）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix5.html"><img src="asset/img/example/cache.png"></a>
                              <p>数据驱动，省市级下钻</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/map.html"><img src="asset/img/example/cache.png"></a>
                              <p>地图：【个性化】填充、标签文本、线条样式等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>混搭</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix1.html"><img src="asset/img/example/cache.png"></a>
                              <p>折线图与柱状图混搭，双数值轴</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix2.html"><img src="asset/img/example/cache.png"></a>
                              <p>柱状图与饼图混搭</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix4.html"><img src="asset/img/example/cache.png"></a>
                              <p>折线图与散点图混合（使用时需要注意同步数值轴与类目轴坐标）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix7.html"><img src="asset/img/example/cache.png"></a>
                              <p>用饼图代替散点混合</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/mix3.html"><img src="asset/img/example/cache.png"></a>
                              <p>地图与饼图混搭，地图同时作为地域选择器</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/lasagna.html"><img src="asset/img/example/cache.png"></a>
                              <p>多层嵌套环形图，千层饼</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/wormhole.html"><img src="asset/img/example/cache.png"></a>
                              <p>多层嵌套雷达图，虫洞</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <h1>组件</h1>
                <section class="slider">
                    <div class="flexslider thumb3"  id="component">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/axis.html"><img src="asset/img/example/cache.png"></a>
                              <p>坐标系：【个性化】标签文字、间隔线、间隔区域样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dataZoom1.html"><img src="asset/img/example/cache.png"></a>
                              <p>数据区域缩放</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dataZoom.html"><img src="asset/img/example/cache.png"></a>
                              <p>数据区域缩放：【个性化】数据阴影、背景、拖拽手柄样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dataRange1.html"><img src="asset/img/example/cache.png"></a>
                              <p>值域漫游</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dataRange.html"><img src="asset/img/example/cache.png"></a>
                              <p>值域控件：【个性化】布局，填充样式样式等~</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/tooltip.html"><img src="asset/img/example/cache.png"></a>
                              <p>提示框：【个性化】文字样式、边框、背景、格式器等~</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
            <div class="span6">
                <h1>其他</h1>
                <section class="slider">
                    <div class="flexslider thumb4">
                        <ul class="slides">
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dynamicLineBar.html"><img src="asset/img/example/cache.png"></a>
                              <p>动态数据（折线图、柱状图）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dynamicScatterK.html"><img src="asset/img/example/cache.png"></a>
                              <p>动态数据（散点图、K线图）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/dynamicPieRadar.html"><img src="asset/img/example/cache.png"></a>
                              <p>动态数据（饼图、雷达图）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/loading.html"><img src="asset/img/example/cache.png"></a>
                              <p>加载中（Loading）</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/cache.png">
                              <a href="example/event.html"><img src="asset/img/example/cache.png"></a>
                              <p>事件交互，可以捕获的用户交互和数据变化事件实现图表与外界的联动。</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/import.png">
                              <a href="example/www/index.html"><img src="asset/img/example/import.png"></a>
                              <p>模块化单文件引入ECharts</p>
                            </li><!--/li-->
                            <li data-thumb="asset/img/example/import.png">
                              <a href="example/www2/index.html"><img src="asset/img/example/import.png"></a>
                              <p>非模块化单文件引入ECharts</p>
                            </li><!--/li-->
                        </ul>
                    </div>
                  </section>
            </div>
        </div>
        <hr>
        <h3>主题<a name="topic"></a></h3>
        <p>主题定制调试工具，<a href='example/themeDesigner.html' target="_blank">ECharts Theme Designer</a></p>
        <p><small>ps:别太依赖代码编辑区，没做本地缓存，页面刷新就没了，建议使用一个本地编辑器编辑主题，只用代码区作为主题定制调试工具。主题写好试试顶部的SaveAsImage（IE8-不支持），会把所有图表合并到一张图中，这是默认样式，期待与我们联系，show出你的主题，让你的设计成为ECharts内置甚至默认主题随时有可能，我们将为您献上一份小礼品同时你的名字将被永留在贡献者名单中。</small></p>
        <a href="example/themeDesigner.html" target="_blank"><img src="asset/img/example/EChartsTheme.png"></a>
        <hr>
        <h3>专题<a name="topic"></a></h3>
        <p><small>专题页没做低版本IE兼容性处理，请用IE9+、chrome、safari、firefox或opear等现代浏览器。</small></p>
        <ul>
            <li><a href="example/topic/aqi-china/index.html" target="_blank">中国主要城市空气质量实况 </a> by <a href="http://weibo.com/wfsr" target="_blank">大佛</a>（百度） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
            <li><a href="example/topic/10-me-china/index.html" target="_blank">中国经济十年时空漫游（2002-2011）</a> by 于博（新华社） · 吴楚茵（南方都市报） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
            <li><a href="example/topic/24-population-china/index.html" target="_blank">中国人口流动大潮（1987-2011）</a> by 孟立昕（腾讯）· 王飞宇（证券时报） · 颜冬（视觉中国） · <a href="http://weibo.com/kenerlinfeng" target="_blank">林峰</a>（百度）</li>
            
        </ul>
        <hr>
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <a href="changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="asset/js/jquery.js"></script>
    <script src="asset/js/bootstrap-transition.js"></script>
    <script src="asset/js/bootstrap-alert.js"></script>
    <script src="asset/js/bootstrap-modal.js"></script>
    <script src="asset/js/bootstrap-dropdown.js"></script>
    <script src="asset/js/bootstrap-scrollspy.js"></script>
    <script src="asset/js/bootstrap-tab.js"></script>
    <script src="asset/js/bootstrap-tooltip.js"></script>
    <script src="asset/js/bootstrap-popover.js"></script>
    <script src="asset/js/bootstrap-button.js"></script>
    <script src="asset/js/bootstrap-collapse.js"></script>
    <script src="asset/js/bootstrap-carousel.js"></script>
    <script src="asset/js/bootstrap-typeahead.js"></script>
    <!-- FlexSlider -->
    <script defer src="asset/js/jquery.flexslider.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 3000, 
        controlNav: "thumbnails"
      });
      var section = $('.flexslider');
      function loadImage(i) {
          setTimeout(function(){
              var list = $('div>ul>li>a', section[i]);
              var nav = $('ol>li>img', section[i]);
              var href;
              var src;
              if (list.length > 0) {
                  list[0].firstChild.alt = 'ECharts';
                  for (var j = 1, k = list.length - 1; j < k; j++) {
                      list[j].target = '_blank';
                      href = list[j].href.slice(list[j].href.lastIndexOf('/') + 1, -5);
                      src = list[j].firstChild.src.replace(
                          'cache', href
                      );
                      list[j].firstChild.alt = 'ECharts ' + href;
                      list[j].firstChild.src = src;
                      nav[j - 1].alt = 'ECharts ' + href;
                      nav[j - 1].src = src;
                  }
                  list[list.length - 1].firstChild.alt = 'ECharts';
              }
          }, i * 500);
      }
      for (var i = 0, l = section.length; i < l; i++) {
          loadImage(i);
      }
    });
    </script>
  </body>
</html>
